<template>
	<div class="view">
        <div class="container">
        	<div class="cart">
        		<div class="box cart-tit g">
        			<div class="justify">
        				<div class="cart-num">共<span class="pink">4</span>件商品</div>
        				<a href="javascript:;" class="edit-btn">编辑</a>
        			</div>
        		</div>
        		<div class="cart-list">
        			<dl class="list-prod-item">
						<dt class="shop-title">
							<div class="checkbox-wrap">
								<div class="checkbox">
									<input type="checkbox" >
									<i class="checkbox-icon"></i>
								</div>
								<div class="shop-name">无印良品</div>
							</div>    					
						</dt>
						<dd class="list-prod-info">
							<div class="checkbox-wrap">
								<div class="checkbox">
									<input type="checkbox" >
									<i class="checkbox-icon"></i>
								</div>
								<div class="prod-content fix">
									<a class="prod-img" href=""><img src="/static/images/p18.jpg" alt=""></a>
									<div class="shop-prod-text">
										<div class="prod-name">男士洗发水</div>
										<div class="prod-add">产地：美国</div>
										<div class="prod-price">
											<span class="now">￥230</span>
											<del class="old">￥460</del>
										</div>
										<div class="calc">
											<div class="justify">
												<div class="min"></div>
												<div class="calc-num">1</div>
												<div class="add"></div>
											</div>
										</div>
									</div>

								</div>
							</div>
						</dd>
					
					</dl>
					<dl class="list-prod-item">
						<dt class="shop-title">
							<div class="checkbox-wrap">
								<div class="checkbox">
									<input type="checkbox" >
									<i class="checkbox-icon"></i>
								</div>
								<div class="shop-name">无印良品</div>
							</div>    					
						</dt>
						<dd class="list-prod-info">
							<div class="checkbox-wrap">
								<div class="checkbox">
									<input type="checkbox" >
									<i class="checkbox-icon"></i>
								</div>
								<div class="prod-content fix">
									<a class="prod-img" href=""><img src="/static/images/p18.jpg" alt=""></a>
									<div class="shop-prod-text">
										<div class="prod-name">男士洗发水</div>
										<div class="prod-add">产地：美国</div>
										<div class="prod-price">
											<span class="now">￥230</span>
											<del class="old">￥460</del>
										</div>
										<div class="calc">
											<div class="justify">
												<div class="min"></div>
												<div class="calc-num">1</div>
												<div class="add"></div>
											</div>
										</div>
									</div>

								</div>
							</div>
						</dd>
						<dd class="list-prod-info">
							<div class="checkbox-wrap">
								<div class="checkbox">
									<input type="checkbox" >
									<i class="checkbox-icon"></i>
								</div>
								<div class="prod-content fix">
									<a class="prod-img" href=""><img src="/static/images/p18.jpg" alt=""></a>
									<div class="shop-prod-text">
										<div class="prod-name">男士洗发水</div>
										<div class="prod-add">产地：美国</div>
										<div class="prod-price">
											<span class="now">￥230</span>
											<del class="old">￥460</del>
										</div>
										<div class="calc">
											<div class="justify">
												<div class="min"></div>
												<div class="calc-num">1</div>
												<div class="add"></div>
											</div>
										</div>
									</div>

								</div>
							</div>
						</dd>
					
					</dl>

					<!--    失效商品     -->
					<div class="timeout-prod">
						<dl class="list-prod-item">
							<dt class="shop-title">以下商品已失效，无法购买</dt>
							<dd class="list-prod-info">
								<div class="checkbox-wrap">
									<div class="checkbox timeout-text">失效</div>
									<div class="prod-content fix">
										<a class="prod-img" href=""><img src="/static/images/p18.jpg" alt=""></a>
										<div class="shop-prod-text">
											<div class="prod-name">男士洗发水</div>
											<div class="prod-add">产地：美国</div>
											<div class="prod-price">
												<span class="now">￥230</span>
												<del class="old">￥460</del>
											</div>
											<div class="calc">
												<div class="justify">
													<div class="min"></div>
													<div class="calc-num">1</div>
													<div class="add"></div>
												</div>
											</div>
										</div>

									</div>
								</div>
							</dd>
							<dd class="list-prod-info">
								<div class="checkbox-wrap">
									<div class="checkbox timeout-text">失效</div>
									<div class="prod-content fix">
										<a class="prod-img" href=""><img src="/static/images/p18.jpg" alt=""></a>
										<div class="shop-prod-text">
											<div class="prod-name">男士洗发水</div>
											<div class="prod-add">产地：美国</div>
											<div class="prod-price">
												<span class="now">￥230</span>
												<del class="old">￥460</del>
											</div>
											<div class="calc">
												<div class="justify">
													<div class="min"></div>
													<div class="calc-num">1</div>
													<div class="add"></div>
												</div>
											</div>
										</div>

									</div>
								</div>
							</dd>
						
						</dl>
						<div class="clear-timeout">
							<a href="" class="clear-timeout-btn">清空失效商品</a>
						</div>
					</div>
        		</div>
        		<!--      购物车为空时显示 start       -->
        		<!--
        		<div class="cart-empty">
        			<div class="cart-empty-bg"></div>
        			<div class="hot-up"></div>
        			<div class="prod-list">
		        		<ul class="col-2">
		        			<li>
		        				<a href="">
		        					<img src="/static/images/p10.png" alt="">
		        					<div class="info">
			        					<p class="fz26">无印良品</p>
			        					<p class="fz24 gray">鱿鱼丝</p>
			        					<p class="fz28">￥23</p>
		        					</div>
		                            <div class="sale-tag">3折</div>
		        				</a>
		        			</li>
		        			<li>
		        				<a href="">
		        					<img src="/static/images/p11.png" alt="">
		        					<div class="info">
		        						<p class="fz26">无印良品</p>
		        						<p class="fz24 gray">棉花糖</p>
		        						<p class="fz28">￥23 <del class="gray"> ￥146</del></p>
		        					</div>
		        				</a>
		        			</li>
		        			<li>
		        				<a href="">
		        					<img src="/static/images/p10.png" alt="">
		        					<div class="info">
			        					<p class="fz26">无印良品</p>
			        					<p class="fz24 gray">鱿鱼丝</p>
			        					<p class="fz28">￥23</p>
		        					</div>
		        				</a>
		        			</li>
		        			<li>
		        				<a href="">
		        					<img src="/static/images/p11.png" alt="">
		        					<div class="info">
		        						<p class="fz26">无印良品</p>
		        						<p class="fz24 gray">棉花糖</p>
		        						<p class="fz28">￥23 <del class="gray"> ￥146</del></p>
		        					</div>
		        				</a>
		        			</li>
		        			<li>
		        				<a href="">
		        					<img src="/static/images/p10.png" alt="">
		        					<div class="info">
			        					<p class="fz26">无印良品</p>
			        					<p class="fz24 gray">鱿鱼丝</p>
			        					<p class="fz28">￥23</p>
		        					</div>
		        				</a>
		        			</li>
		        			<li>
		        				<a href="">
		        					<img src="/static/images/p11.png" alt="">
		        					<div class="info">
		        						<p class="fz26">无印良品</p>
		        						<p class="fz24 gray">棉花糖</p>
		        						<p class="fz28">￥23 <del class="gray"> ￥146</del></p>
		        					</div>
		        				</a>
		        			</li>
		        		</ul>
	        		</div>
        		</div> 
        		-->
        		<!--      购物车为空时显示 end       -->
        	</div>
        </div>
        <router-view></router-view>
        <div class="foot-bar">
			<div class="checkbox-wrap">
				<div class="checkbox">
					<input type="checkbox">
					<i class="checkbox-icon"></i>
				</div>
				<span>全选</span>
				<div class="foot-bar-right">
					<div class="foot-balance">
						<span class="total">总价：<span class="total-price">269.00</span></span>
						<router-link to="confirm" class="foot-balance-btn foot-bar-btn">去结算(2)</router-link>
					</div>
					<div class="foot-delete none">
						<a href="" class="foot-delete-btn foot-bar-btn">删除(<span class="delete-count">0</span>)</a>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
	export default{
		name:'shopping',
		data () {
			return {

			}
		}
	}
</script>

<style scoped>
	.foot-bar{
		bottom: 50px;
	}
</style>